<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8">我的收藏</h1>

    <div v-if="favorites.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <NewsCard 
        v-for="item in favorites" 
        :key="item.id" 
        :news-item="item" 
        @toggle-favorite="toggleFavorite"
      />
    </div>

    <div v-else class="text-center py-16 bg-gray-50 dark:bg-gray-800 rounded-lg">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 mx-auto text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
      </svg>
      <h3 class="text-xl font-medium text-gray-900 dark:text-white mb-2">暂无收藏内容</h3>
      <p class="text-gray-500 dark:text-gray-400 mb-6">浏览新闻时点击收藏按钮将内容保存到这里</p>
      <router-link to="/" class="inline-block px-6 py-3 bg-blue-500 text-white rounded-full hover:bg-blue-600">
        去浏览新闻
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useFavoritesStore } from '../store'
import NewsCard from '../components/NewsCard.vue'

const favoritesStore = useFavoritesStore()
const { favorites, toggleFavorite } = favoritesStore
</script>